<template>
  <div class="fine">
    <Suspense>
      <RecommendSlot :imageBaseUrl="imageBaseUrl" :recommends="goodRecommend">
        <template #title>
          精品推荐
        </template>
      </RecommendSlot>
    </Suspense>
    <Suspense>
      <BookRank :bookRanks="bookRanks">
        <template #title>
          新书榜单
        </template>
      </BookRank>
    </Suspense>

  </div>
</template>
<script lang="ts" setup>
import {nextTick, onMounted, reactive, ref, toRefs} from "vue";
import {ElLoading} from "element-plus";
import BookRank from "@/components/home/RankSlot.vue";
import RecommendSlot from "@/components/home/RecommendSlot.vue";
import {listNewestRankBooks} from "@/api/book";

const props = defineProps({
  goodRecommend: {
    type: Array,
    default: () => []
  }
})
const {goodRecommend} = toRefs(props)
const bookRanks = ref([]);
// const imageBaseUrl = ref(process.env.VITE_APP_BASE_IMG_URL);
const imageBaseUrl = ref(import.meta.env.VITE_APP_BASE_IMG_URL);
onMounted(async () => {
  const {data} = await listNewestRankBooks();

  await data.forEach((book: any) => {
    if (bookRanks.value.length < 10) {
      bookRanks.value.push(book);
    }
  });
});

</script>


<style lang="scss" scoped>
.fine {
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  background-color: #FFFFFF;
  margin-top: 20px;
  box-sizing: border-box;
  display: flex;
}
</style>